<template>
    <div class="menu">
        <div class="clearfix text-r border-b-eded height-24 line-height-19 pl-20 pr-20">
            <a-button size="small" type="primary" icon="plus" class="pull-left mt-5" @click="addMenu"></a-button>
            <a-button size="small" type="primary" icon="reload" class="mr-10" @click="getMenuList"></a-button>
<!--            <a-button size="small" type="primary" icon="vxe-icon&#45;&#45;menu">-->
<!--                <i style="margin-top: -1px" class="vxe-icon&#45;&#45;menu"></i>-->
<!--            </a-button>-->
        </div>
        <div class="table-content">
            <vxe-table
                    border
                    resizable
                    highlight-hover-row
                    highlight-current-row
                    highlight-hover-column
                    highlight-current-column
                    row-id="id"
                    :loading="loading"
                    size="mini"
                    ref="menuTree"
                    :context-menu="{body: {options: bodyMenus}, visibleMethod}"
                    @context-menu-click="contextMenuClickEvent"
                    :tree-config="{
                           children: 'childrenList',
                           expandRowKeys: expandedRowKeys,
                           accordion: false,
                           expandAll: true,
                           line: true
                    }"
                    :data="menuList">
                <vxe-table-column min-width="250" field="resourceName" title="名称" fixed="left" tree-node></vxe-table-column>
                <vxe-table-column min-width="100" title="类型" fixed="left">
                    <template v-slot="{row}">
                        <span v-if="row.resourceType === 1">菜单</span>
                        <span v-else>按钮</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column min-width="120" field="permission" title="权限值"></vxe-table-column>
                <vxe-table-column min-width="120" field="resourceUrl" title="链接地址"></vxe-table-column>
                <vxe-table-column min-width="120" field="sortBy" title="排序"></vxe-table-column>
                <vxe-table-column min-width="120" field="resourceIcon" title="图标"></vxe-table-column>
                <vxe-table-column min-width="120" title="状态">
                    <template v-slot="{row}">
                        <span v-if="row.hideFlag === 0">显示</span>
                        <span v-else>隐藏</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column min-width="120" field="createdTime" title="创建时间"></vxe-table-column>
                <vxe-table-column fixed="right" :resizable="false" width="135" title="操作">
                    <template v-slot="{row}">
                        <div class="text-c clearfix">
                            <a-button size="small" type="primary" icon="plus" class="pull-left mb-10 mr-10" @click="addChildMenu(row)">
                                菜单
                            </a-button>
                            <a-button size="small" type="primary" icon="edit" class="pull-left mb-10 mr-10" @click="editMenu(row)"></a-button>
                            <a-button size="small" type="primary" icon="plus" class="pull-left mr-10" @click="addBtn(row)">
                                按钮
                            </a-button>
                            <a-button size="small" type="danger" icon="delete" class="pull-left" @click="delMenuOrBtn(row)"></a-button>
                        </div>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </div>
        <add-menu ref="addMenu" @done="getMenuList"></add-menu>
        <addBtn ref="addBtn" @done="getMenuList"></addBtn>
    </div>
</template>

<script>
    import addMenu from './add';
    import addBtn from "./addBtn";
    export default {
        components: {
            addMenu,
            addBtn
        },
        data () {
            return {
                menuList: [],
                params: {},
                loading: false,
                bodyMenus: [
                    [
                        {
                            code: 'expand',
                            name: '展开节点',
                            disabled: false,
                        },
                        {
                            code: 'contract',
                            name: '收起节点',
                            disabled: false,
                        },
                        {
                            code: 'expandAll',
                            name: '全部展开',
                            disabled: false,
                        },
                        {
                            code: 'contractAll',
                            name: '全部收起',
                            disabled: false,
                        },
                    ]
                ],
                expandedRowKeys: [],
            };
        },
        mounted () {
            this.getMenuList();
        },
        methods: {
            //菜单列表获取
            getMenuList () {
                this.loading = true;
                this.$api.permission.listbypermission().then(res => {
                    this.loading = false;
                    if (res && res.code !== 200) {
                        this.$message.error(res.errorMsg);
                        return;
                    }
                    this.menuList = res && res.data && res.data.records || [];
                    this.$nextTick(() => {
                        this.$refs.menuTree.setAllTreeExpand(true);
                    });
                }).catch(err => {
                    this.loading = false;
                    this.$message.error(err.errorMsg);
                });
            },
            //新增菜单
            addMenu (data) {
                this.$refs.addMenu.show(data,'新增菜单',0);
            },
            //新增子菜单
            addChildMenu (data) {
                let obj = {
                    resourceName: '',
                    resourceUrl: '',
                    resourceIcon: '',
                    sortBy: '',
                    hideFlag: 0,
                    parentId: data.id,
                    id: '',
                    resourceType: 1,
                };
                this.$refs.addMenu.show(obj,'新增下级菜单',0);
            },
            //编辑菜单或者按钮
            editMenu (data) {
                if (data.resourceType === 1) {
                    let obj = {
                        resourceName:  data.resourceName,
                        resourceUrl: data.resourceUrl,
                        resourceIcon:  data.resourceIcon,
                        sortBy:  data.sortBy,
                        hideFlag: data.hideFlag,
                        parentId: data.parentId,
                        id:  data.id,
                        resourceType: 1,
                    };
                    this.$refs.addMenu.show(obj,'编辑菜单',1);
                }
                if (data.resourceType === 2) {
                    let obj = {
                        menuName: data.resourceName,
                        resourceName:  data.resourceName,
                        permission: data.permission,
                        sortBy:  data.sortBy,
                        parentId: data.parentId,
                        id:  data.id,
                        resourceType: 2,
                    };
                    this.$refs.addBtn.show(obj,'编辑按钮',1);
                }
            },
            //添加按钮
            addBtn (data) {
                this.$refs.addBtn.show(data,'新增按钮',0);
            },
            //删除菜单或者按钮
            delMenuOrBtn (data) {
                //删除菜单或者按钮
                let _this = this;
                let delayNodeApi = _this.$api.permission.delPermission;
                let delTitle = data.resourceType === 1 ? '删除菜单' : '删除按钮';
                let delTips = data.resourceType === 1 ? '是否确定删除该菜单' : '是否确定删除该按钮';
                _this.$confirm({
                    title: delTitle,
                    content: delTips,
                    okText: '是',
                    okType: 'danger',
                    cancelText: '否',
                    onOk() {
                        _this.delMenuOrBtnApi(delayNodeApi,{id: data.id});
                    },
                });
            },
            //删除菜单或者页面按钮api
            delMenuOrBtnApi (api,data) {
                api(data).then(res => {
                    if (res && res.code !== 200) {
                        this.$message.error(res.errorMsg);
                        return;
                    }
                    this.$message.success('删除成功');
                    this.getMenuList();
                }).catch(err => {
                    this.$message.error(err.errorMsg);
                });
            },
            //右键事件设置
            contextMenuClickEvent ({ menu, row }) {
                let xTree = this.$refs.menuTree;
                switch (menu.code) {
                    case 'expand':
                        xTree.setTreeExpansion(row, true);
                        break;
                    case 'contract':
                        xTree.setTreeExpansion(row, false);
                        break;
                    case 'expandAll':
                        xTree.setAllTreeExpand(true);
                        break;
                    case 'contractAll':
                        xTree.setAllTreeExpand(false);
                        break;
                }
            },
            //展开收缩节点配置
            visibleMethod  ({ row, type }) {
                let xTree = this.$refs.menuTree;
                if (type === 'body') {
                    this.bodyMenus.forEach(list => {
                        list.forEach(item => {
                            if (['expand', 'contract'].includes(item.code)) {
                                if (row.childrenList && row.childrenList.length) {
                                    let isExpand = xTree.isTreeExpandByRow(row);
                                    item.disabled = ['expand'].includes(item.code) ? isExpand : !isExpand;
                                } else {
                                    item.disabled = true;
                                }
                            }
                        });
                    });
                }
                return true;
            },
        }
    };
</script>

<style scoped lang="scss">

</style>
